<template>
    <div class="box">
        <ul>
            <li class="left1"></li>
            <li class="center1"></li>
            <li class="right1"></li>
            <li class="left2"></li>
            <li class="center2">
                <div class="content">
                    <div class="leftCon">
                        <p>进无止</p>
                        <div>
                            <span class="cnZh">尽</span>
                            <span class="enTt">ENDLESS</span>
                        </div>
                    </div>
                    <div class="rightCon">
                        <div class="logoModule">
                            <img class="logo" src="./img/loginLogo.png" alt />
                            <h3>车家佳运营管理平台</h3>
                            <p>Business Management System</p>
                        </div>
                        <div class="loginModule" ref="verify">
                            <div class="inputItem">
                                <div class="inputDiv">
                                    <!-- <img src alt /> -->
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-user-1"></use>
                                    </svg>
                                    <input
                                        type="text"
                                        data-type="User"
                                        @keydown.enter="login"
                                        @input="verify"
                                        @blur="verify"
                                        v-model="account"
                                        placeholder="请输入内容"
                                    />
                                </div>
                            </div>
                            <div class="inputItem">
                                <div class="inputDiv">
                                    <!-- <img src alt /> -->
									<svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-unlock"></use>
                                    </svg>
                                    <input
                                        data-type="PassWord"
                                        @keydown.enter="login"
                                        @blur="verify"
                                        type="password"
                                        v-model="password"
                                        autocomplete="new-password"
                                        placeholder="请输入密码"
                                    />
                                </div>
                            </div>
                            <div class="inputItem yzmBox">
                                <div class="inputDiv yzm">
                                    <!-- <img src alt /> -->
									<svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-shield-enable-1"></use>
                                    </svg>
                                    <input
                                        data-type="Yzm"
                                        @keydown.enter="login"
                                        @blur="verify"
                                        type="text"
                                        v-model="verifycode"
                                        placeholder="请输入验证码"
                                    />
                                </div>
                                <img
                                    class="yzmData"
                                    ref="login_yzm"
                                    src
                                    alt
                                    @click="changeYzm"
                                    title="点击刷新验证码"
                                />
                            </div>
                            <div class="yzError">
                                <div class="el-icon-warning" v-show="errorMsg">
                                    <span>{{ errorMsg }}</span>
                                </div>
                            </div>
                            <button class="submit" @click="login">登录</button>
                        </div>
                        <div class="rememberPwd">
                            <!-- <div>

                            记住密码
              </div>-->
                            <el-checkbox v-model="checked"
                                >记住密码</el-checkbox
                            >
                            <a class="joinUs" href>加入我们</a>
                        </div>
                    </div>
                </div>
            </li>
            <li class="right2"></li>
            <li class="left3"></li>
            <li class="center3"></li>
            <li class="right3"></li>
        </ul>
    </div>
</template>

<script>
import store from "../../store";
import { mapState } from 'vuex';
import Base64 from '@/common/js/base64.js';
export default {
    name: "component_name",
    data() {
        return {
            account: "",
            password: "",
            verifycode: "",
            checked: false,
            errorMsg: "",
            host: ""
        };
    },
    created() {
        this.getCookie();
        this.$nextTick(function () {
            let dom = this.$refs.login_yzm;
            this.host = this.$store.state.location.origin;
            dom.src = this.host + "/captcha/index.php?act=captcha&op=getCode";
        });
        const tag = [...document.getElementsByTagName('meta')].find(item => item.name === "viewport")
        tag.content = 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0'
    },
    beforeRouteEnter(to, from, next) {
        console.log('sign组件守卫',to,from)
        const isLogin = !isEmptyObject(store.getters.user_info);
        // console.log('sign判断是否登陆',isLogin)
		let route = to.path;
		console.log('sigin`1')
        if (isLogin) {
			console.log('sigin`2')
            if (route && route != "/sign-in" && route != "/") {
				console.log('sigin`2-1')
                next(route);
            } else {
				console.log('sigin`2-2')
                next("/home");
            }
        } else {
			console.log('sigin`3')
            next();
        }
    },
    methods: {
        /* 切换验证码 */
        changeYzm(e) {
            e.target.src = this.host + "/captcha/index.php?act=captcha&op=getCode";
        },
        login() {
            this.$http
                .post("/admin/login/index.php?act=login", {
                    user_name: Base64.encode(this.account),
                    password: Base64.encode(this.password),
                    captcha: this.verifycode * 1
                })
                .then(
                    res => {
                        if (res.code === 1) {
                            /* sessionStorage.setItem("first_departId",res.data.first_depart_id);
                            sessionStorage.setItem("admin_type",res.data.admin_type);
                            sessionStorage.setItem("pageIndex",0); */

                            if (this.checked) {
                                //传入账号名，密码，和保存天数3个参数
                                this.setCookie(this.account, this.password, 7);
                                localStorage.checked = this.checked;
                            } else {
                                //清空Cookie
                                this.clearCookie();
                                localStorage.checked = "";
                            }
                            this.$store.commit("SET_USERINFO", res.data);
                            this.$router.push("/home");
                        } else if (res.msg == "请勿重复登录！") {
                            this.$router.push("/home");
                        } else {
                            if (res.code == 1003) {
                                this.$nextTick(function () {
                                    this.verifycode = ""
                                    let dom = this.$refs.login_yzm;
                                    this.host = this.$store.state.location.origin;
                                    console.log(this.host, "this.host")
                                    dom.src = this.host  + "/captcha/index.php?act=captcha&op=getCode";
                                });
                            }
                            this.$message({
                                type: 'error', message: res.msg, showClose: true
                            })
                        }
                    },
                    err => {
                        // console.log("err", err);
                    }
                );
        },
        //设置cookie
        setCookie(c_name, c_pwd, exdays) {
            var exdate = new Date(); //获取时间
            exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
            //字符串拼接cookie
            window.document.cookie =
                "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
            window.document.cookie =
                "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
        },
        //读取cookie
        getCookie() {
            if (localStorage.checked) {
                var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
                for (var i = 0; i < arr.length; i++) {
                    var arr2 = arr[i].split("="); //再次切割
                    //判断查找相对应的值
                    if (arr2[0] == "userName") {
                        this.checked = true;
                        this.account = arr2[1]; //保存到保存数据的地方
                    } else if (arr2[0] == "userPwd") {
                        this.password = arr2[1];
                    }
                }
            }
        },
        //清除cookie
        clearCookie() {
            this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
        },
        verify() {
            let rulers = {
                User: /[^\s]{1,}/g,
                PassWord: /[^\s]{6,}/g,
                Yzm: /\d{1}/g
            };
            let dataValue = [
                {
                    type: "User",
                    value: this.account
                },
                {
                    type: "PassWord",
                    value: this.password
                },
                {
                    type: "Yzm",
                    value: this.verifycode
                }
            ];
            let reg, errorMsg;
            for (let i = 0; i < dataValue.length; i++) {
                errorMsg = "";
                if (dataValue[i].type == "User") {
                    errorMsg = "请输入用户名";
                } else if (dataValue[i].type == "PassWord") {
                    errorMsg = "请输入6位以上密码";
                } else if (dataValue[i].type == "Yzm") {
                    errorMsg = "请输入完整验证码";
                }
                reg = rulers[dataValue[i].type];
                if (!reg.test(dataValue[i].value)) {
                    this.errorMsg = errorMsg;
                    return;
                } else {
                    this.errorMsg = "";
                }
            }
        }
    },
    computed: {
        cjj_is_login() {
            return this.$store.getters.cjj_is_login;
        }
    }
};
</script>
<style scoped lang="scss">
* {
    padding: 0;
    margin: 0;
}
html,
body {
    width: 100%;
    height: 100%;
}
/* 基础 */
.box {
    width: 100%;
    height: 100%;
    /* background: #e4f7fd61; */
    /* border: 2px solid #0786ada1; */
    /* border-radius: 8px; */
    line-height: normal;
    color: #000;
    ul {
        padding: 0;
        width: 100%;
        height: 100%;
        min-width: 900px;
        min-height: 750px;
        overflow: hidden;
        background: url("~@/assets/images/sign_in_bg.jpg")
            no-repeat center/cover #b4b5ba;
    }
    li {
        list-style: none;
        /* text-align: center; */
        background: rgba(255, 255, 255, 0.5);
        float: left;
        width: 33%;
        height: 33%;
    }
    li.center2 {
        /* border-radius: 15px; */
        /* overflow: hidden; */
        background: transparent;
        /* background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566970213444&di=16bcb7f40c97e3e78e6e0eeef5f02206&imgtype=0&src=http%3A%2F%2F02imgmini.eastday.com%2Fmobile%2F20180905%2F20180905152955_e23a7eb6cdce9d6d6c10685a986bb31b_1.jpeg') no-repeat center; */
        box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.4);
        position: relative;
        z-index: 2;
    }
}

.center2 .content {
    height: 100%;
    .leftCon {
        float: left;
        color: #fff;
        padding: 30px 0 0 30px;
        p {
            font-size: 40px;
        }
        .cnZh {
            font-size: 100px;
        }
        .enTt {
            vertical-align: top;
            font-size: 24px;
            line-height: 80px;
        }
    }
    .rightCon {
        float: right;
        width: 300px;
        height: 100%;
        background: #fff;
        .logoModule {
            text-align: center;
            padding: 40px 0 30px 0;
            img {
                display: block;
                width: 126px;
                margin: 0 auto;
                image-rendering: -moz-crisp-edges;
	            image-rendering: -o-crisp-edges;
	            image-rendering: -webkit-optimize-contrast;
	            image-rendering: crisp-edges;
	            -ms-interpolation-mode: nearest-neighbor;
            }
            h3 {
                letter-spacing: 3px;
                margin: 25px 0 5px 0;
                font-weight: bold;
                color: #555;
            }
            p {
                color: #7f7f7f;
            }
        }
        .loginModule {
            padding: 0 22px;
        }
    }
}
/* 列宽度 */
.box .left1,
.box .left2,
.box .left3 {
    width: 20%;
}
.box .center1,
.box .center2,
.box .center3 {
    width: 60%;
    min-width: 300px;
}
.box .right1,
.box .right2,
.box .right3 {
    width: 20%;
}
/* 行高 */
.box .left1,
.box .center1,
.box .right1 {
    height: 20%;
}
.box .left2,
.box .center2,
.box .right2 {
    height: 60%;
    min-height: 300px;
}
.box .left3,
.box .center3,
.box .right3 {
    height: 20%;
}
.inputItem {
    margin: 10px 0 0;
    .inputDiv {
        position: relative;
        height: 40px;
        line-height: 40px;
        img {
            width: 14px;
            height: 14px;
            position: absolute;
            left: 8px;
            top: 50%;
            transform: translate(0, -50%);
        }
		svg {
            width: 20px;
            height: 20px;
            position: absolute;
            left: 8px;
            top: 50%;
			color:#7f7f7f;
            transform: translate(0, -50%);
        }
        input {
            border: none;
            width: 100%;
            height: 100%;
            vertical-align: top;
            padding: 0 20px 0 36px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 14px;
            &::placeholder {
                font-size: 14px;
                color: #c0c4cc;
            }
            &:focus {
                border-color: #479fff;
            }
        }
    }
}
/* 验证码 */
.yzmBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.yzm {
    width: 60%;
}
.yzmData {
    width: 106px;
    height: 24px;
    cursor: pointer;
}
.yzError {
    color: red;
    padding: 12px 0;
    font-size: 14px;
}
.yzError > div {
    display: flex;
    align-items: center;
    height: 100%;
    span { margin-left: 4px; }
}
.submit {
    width: 100%;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    color: #fff;
    background: #479fff;
    border: 1px solid;
    border-color: #479fff;
    border-radius: 4px;
    cursor: pointer;
}
.submit:active {
    border-color: #0077FB;
    background: #0077FB;
}

.rememberPwd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding: 0 22px;
}
.joinUs {
    font-size: 14px;
    color: #479fff;
    text-decoration: underline;
}
@media screen and (max-width: 768px) {
    html,body {
        width: 100%;
        height: 100%; 
        overflow: hidden;
        padding: 0;
        margin: 0;
    }
    .box {
        overflow: hidden;
        
        .leftCon { display: none; }
        ul {
            min-width: 100%;
            min-height: auto;
            li { 
                background: none;
                &:not(.center2) {
                    display: none;
                }
                &.center2 {
                    box-shadow: inherit;
                    .content {
                        .rightCon {
                            position: fixed;
                            height: 550px;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            top: 0;
                            width: 86%;
                            max-width: 450px;
                            min-width: 300px;
                            margin: auto;
                            border-radius: 4px;
                        }
                    }
                }
            }
        }
    }
}
</style>
<style>
.rememberPwd .el-checkbox__input.is-checked .el-checkbox__inner {
    background: #479fff;
    border-color: #479fff;
}
.rememberPwd .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #479fff;
}
/*  .loginModule .inputItem input{
        border-radius: 7px;
    }
    .loginModule .inputItem input:focus{
        border-color:#479FFF;
    } */
</style>
